<template>
  <div style="min-width: 1200px; margin-bottom: 40px">
    <div>
      <img src="/img/Wonders/qijingbig.jpg" alt="" style="width: 100%" />
    </div>
    <div class="zz">
      <div class="qi">
        <div class="dd">
          <span>奇景一览</span>
        </div>
        <div class="sou">
          <ul>
            <li class="li1">当前条件:</li>
            <li class="li2">
              奇景一览
              <a>×</a>
            </li>
            <li class="li3">
              <input type="text" placeholder="当前条件下搜索" />
            </li>
          </ul>
        </div>
        <div class="ming">
          <div class="ca">
            <span>名称</span>
            <span>上架时间</span>
            <span>价格</span>
            <div>
              <span><input type="text" placeholder=" ￥" /></span>
              <span>-</span>
              <span><input type="text" placeholder="￥" /></span>
            </div>
          </div>
          <div class="qw" v-for="item in boli" :key="item.key">
            <router-link :to="`/three/${item.id}`"
              ><img :src="item.p_pic"
            /></router-link>

            <ul>
              <li class="hang">{{ item.p_title }}</li>
              <li class="hang">{{ item.p_zuozhe }}</li>
              <li class="hang">
                {{ item.p_time }}
              </li>
              <li style="color: red" class="hang">{{ item.p_youhui }}</li>
              <li style="color: grey" class="hang">{{ item.p_menshi }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="remen">
        <div class="dd">
          <span>热门景点</span>
        </div>
        <ul>
          <li>
            <div class="t">
              <img class="y" src="/img/index/wonderful/zhaigou.jpg" alt="" />
            </div>
          </li>
          <br />
          <li>寨沟</li>
          <br />
          <li>
            <div class="t">
              <img class="y" src="/img/index/wonderful/shili.jpg" alt="" />
            </div>
          </li>
          <br />
          <li>追梦谷</li>
          <br />
          <li>
            <div class="t">
              <img class="y" src="/img/index/wonderful/zhuimenggu.jpg" alt="" />
            </div>
          </li>
          <br />
          <li>十里画屏</li>
          <br />
          <li>
            <div class="t">
              <img class="y" src="/img/index/wonderful/mazongling.jpg" />
            </div>
          </li>
          <br />
          <li>马鬃玲</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      boli: [],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  mounted() {
    this.axios.get("/boli").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.boli = result.data.results;
    });
  },
};
</script>
<style scoped>
.zz {
  margin: auto;
  margin-top: 50px;
  max-width: 1200px;
  display: flex;
}
.ca {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.dd {
  line-height: 50px;
  border-bottom: 2px solid red;
}
.hang {
  width: 550px;
  line-height: 30px;
}
.remen > ul > li {
  text-align: center;
}
.ss {
  width: 350px;
  height: 30px;
  border-radius: 7px;
  margin-left: -350px;
  margin-top: -15px;
}
.an {
  margin-left: 10px;
  margin-top: -38px;
}
.tushou {
  cursor: pointer;
}
.qi {
  width: 850px;
  height: 1700px;
  margin-right: 30px;
  border: 1px solid rgb(231, 231, 231);
}
.remen {
  width: 300px;
  height: 1550px;
  border: 1px solid rgb(231, 231, 231);
}
.y:hover {
  transform: scale(1.2);
  transition: 1s;
}
.t {
  margin: 20px 0;
  width: 300px;
  overflow: hidden;
}
.sou {
  height: 60px;
}
.sou li {
  float: left;
}
.li1 {
  margin: 20px 10px;
  font-size: 15px;
}
.li2 {
  border: 1px solid gray;
  height: 35px;
  width: 90px;
  margin: 10px 10px;
  text-align: center;
  line-height: 35px;
  font-size: 13px;
}
.li3 {
  margin-left: 600px;
  margin-top: -45px;
}
.li3 input {
  height: 30px;
}
.ming {
  height: 40px;
  border: 1px solid rgb(231, 231, 231);
  background-color: rgb(201, 201, 201);
}
.qw {
  margin-top: 40px;
  margin-left: 20px;
  height: 300px;
  display: flex;
  justify-content: space-between;
}
.qw img {
  width: 250px;
  height: 220px;
}
</style>